<template>
  <div>
    <el-card class="topCard">
      <div class="title"><span>传感器设备</span></div>
      <hr>
      <div class="sensorBox">
        <div class="sensor_i"><i class="el-icon-data-analysis"></i></div>
        <div class="sensor_text">
          <p>温度传感器</p>
          <p>数据：</p>
        </div>
      </div>
      <div class="sensorBox">
        <div class="sensor_i"><i class="el-icon-data-analysis"></i></div>
        <div class="sensor_text">
          <p>设备名称：</p>
          <p>数据：</p>
        </div>
      </div>
      <div class="sensorBox">
        <div class="sensor_i"><i class="el-icon-data-analysis"></i></div>
        <div class="sensor_text">
          <p>设备名称：</p>
          <p>数据：</p>
        </div>
      </div>

    </el-card>

    <el-card class="bottomCard">
      <div id="main"
           style="width: 600px;height:400px;"></div>

    </el-card>

  </div>
</template>

<script>
//导入echarts
import * as echarts from 'echarts';
export default {
  name: 'Room',
  data () {
    return {
      roomDate: [
        {
          id: 'A01',
          type: '化学实验室'
        }
      ]
    }
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    // 指定图表的配置项和数据
    var option = {
      title: {
        text: '温度数据分析图'
      },
      tooltip: {},
      legend: {
        data: ['摄氏度']
      },
      xAxis: {
        data: ['1', '2', '3', '4', '5', '6']
      },
      yAxis: {},
      series: [
        {
          name: '摄氏度',
          type: 'line',
          smooth: true,
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
  },
}
</script>

<style scoped>
.topCard {
  height: 250px;
}

.title {
  font-size: 20px;
}

.sensorBox {
  margin-top: 20px;
}

.sensor_i {
  height: 120px;
  width: 120px;
  border: 1px solid #797979;
  border-radius: 50%;
  float: left;
}

.sensorBox i {
  font-size: 100px;
  margin-top: 12px;
  margin-left: 10px;
}

.sensorBox .sensor_text {
  float: left;
  margin-top: 20px;
  margin-left: 10px;
  margin-right: 80px;
}
.sensorBox .sensor_text p {
  margin-top: 20px;
}

.bottomCard {
  font-size: 20px;
}
</style>